<template>
	<view class="content" :style="{'padding-top':top+'px','min-height':windowheight+'px'}">
		<Navbar title="我的相册" bgColor="#d86784" :backIcon="false" style="color: #ffffff;z-index: 1;"></Navbar>
		<view v-if="albumlistsLenght===0" style="position: absolute;top: 50%;transform: translate(0,-50%);font-size: 40rpx;">您还没有拍摄的相册</view>
		<view class="albuml_item" v-for="(item,index) in albumcollection" :key="index">
			<view class="albumli_img" @tap.stop="tophoto(index,0)">
				<image :src="item[0].shootAddressPhoto" mode="aspectFill"></image>
				<view class="albumli_tit">{{item[0].albumName}}</view>
				<uni-dateformat :date="item[0].createdTime" format="yyyy/MM/dd hh:mm:ss" class="time"></uni-dateformat>
			</view>
			<view class="albumli_img1" v-if="item.length>=2" @tap.stop="tophoto(index,1)">
				<image :src="item[1].shootAddressPhoto" mode="aspectFill"></image>
				<view class="albumli_tit">{{item[1].albumName}}</view>
				<uni-dateformat :date="item[1].createdTime" format="yyyy/MM/dd hh:mm:ss" class="time"></uni-dateformat>
			</view>
			<view class="albumli_img2" v-if="item.length>=3" @tap.stop="tophoto(index,2)">
				<image :src="item[2].shootAddressPhoto" mode="aspectFill"></image>
				<view class="albumli_tit">{{item[2].albumName}}</view>
				<uni-dateformat :date="item[2].createdTime" format="yyyy/MM/dd hh:mm:ss" class="time"></uni-dateformat>
			</view>
		</view>
	</view>
</template>
<script setup>
	import { ref,onMounted } from 'vue'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	const baseUrl = getApp().globalData.baseUrl
	const title=ref('Hello')
	const windowheight=ref()
	const platform = ref()
	const statusBar = ref()
	const customBar = ref()
	const top = ref()
	const albumlists = ref()
	const albumlistsLenght=ref()
	const albumcollection=ref([])
	const num=ref()
	const tophoto = (index,index1) => {
		uni.navigateTo({
			url:'/pages/myphone/myphone?index='+index+"&index1="+index1
		})
	}
	const getColumnHeight=()=>{
		uni.getSystemInfo({
			success(res) {
				console.log(res)
				platform.value = res.platform
				windowheight.value=res.screenHeight
				// #ifdef MP-WEIXIN
				statusBar.value = res.statusBarHeight
				const custom = wx.getMenuButtonBoundingClientRect()
				customBar.value = custom.bottom + custom.top - res.statusBarHeight
				// #endif
				// #ifdef APP-PLUS
				statusBar.value = res.statusBarHeight
				customBar.value = res.statusBarHeight + 45
				// 这里是在安卓手机上加上 3 像素（当时好像是在安卓水滴屏上，系统导航栏高度较低才加上去的，大家可以真机自己调试一下）
				if (res.platform == "android") {
					statusBar.value += 3
					customBar.value += 3
				}
				// #endif
			}
		})
		top.value = customBar.value
		windowheight.value=windowheight.value-top.value-10
		//console.log(statusBar.value, customBar.value, top.value,windowheight.value)
	}
	onShow(()=>{
		// const now = new Date().getTime()
		// if (!uni.getStorageSync('token') || now > uni.getStorageSync('expireTime')) {
		// 	uni.reLaunch({
		// 		url: "/pages/login/login"
		// 	})
		// }
		albumcollection.value=[]
		uni.request({
			url: getApp().globalData.baseUrl + "/album/list",
			header: {
				'content-type': 'application/json',
				'Access-Control-Allow-Origin': "*",
				'Authorization': uni.getStorageSync('token')
			},
			data: {
				albumId: null,
				clientNo: JSON.parse(uni.getStorageSync("user_info")).client_no,
				photographerId: null,
				shootName: null,
				shootAddressId: null,
				albumName: null
			},
			method: "POST",
			success: (res) => {
				console.log(res)
				console.log(res.data.value)
				albumlists.value = res.data.value
				albumlistsLenght.value=albumlists.value.length
				console.log(Math.ceil(albumlistsLenght.value/3))
				num.value=Math.ceil(albumlistsLenght.value/3)
				for(let i=0;i<Math.ceil(albumlistsLenght.value/3);i++){
					console.log(albumlists.value.slice(i+i*2,i+i*2+3))
					albumcollection.value.push(albumlists.value.slice(i+i*2,i+i*2+3))
					console.log(albumcollection.value)
				}
			},
			fail: (err) => {
				console.log(err)
			}
		})
	})
	onMounted(()=>{
		getColumnHeight()
	})
</script>
<style lang="less">
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-image: linear-gradient(to bottom,#d95e7d,#ffffff);
		padding-bottom: 10px;
	}
	.albuml_item {
		width: 95%;
		margin-top: 20rpx;
	}
	
	.albumli_img {
		width: 100%;
		text-align: center;
		position: relative;
		image{
			width: 100%;
			border-radius: 10rpx;
		}
		.albumli_tit {
			font-size: 70rpx;
			font-weight: bold;
			color: #fff;
			margin: 6rpx 0 12rpx 0;
			position: absolute;
			top: 10rpx;
			right: 20rpx;
		}
		.time{
			position: absolute;
			top: 100rpx;
			right: 20rpx;
			color: #fff;
		}
	}
	.albumli_img1 {
		width: 49%;
		height: 240rpx;
		text-align: center;
		margin-top: 10rpx;
		float: left;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.albumli_tit {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			margin: 6rpx 0 12rpx 0;
			position: absolute;
			bottom: 30rpx;
			left: 20rpx;
		}
		.time{
			font-size: 20rpx;
			position: absolute;
			bottom: 10rpx;
			left: 20rpx;
			color: #fff;
		}
	}
	.albumli_img2 {
		width: 49%;
		height: 240rpx;
		text-align: center;
		margin-top: 10rpx;
		float: right;
		position: relative;
		image{
			width: 100%;
			height: 100%;
			border-radius: 10rpx;
		}
		.albumli_tit {
			font-size: 36rpx;
			font-weight: bold;
			color: #fff;
			margin: 6rpx 0 12rpx 0;
			position: absolute;
			bottom: 30rpx;
			left: 20rpx;
		}
		.time{
			font-size: 20rpx;
			position: absolute;
			bottom: 10rpx;
			left: 20rpx;
			color: #fff;
		}
	}
	
	.albumli_info {
		display: flex;
		justify-content: space-between;
		font-size: 24rpx;
		color: #aaa
	}
	
	.albumlii_item {
		width: 32%;
	
	}
</style>